<template>
    <div class="uploadImg">
        <p>{{title}}</p>
        <div class="fileListBox wrapfix">
            <!-- <div class="fitem preview">
                <label class="el-upload-list__item-status-label"><i class="el-icon-upload-success el-icon-check"></i></label>
            </div> -->
            <ul class="el-upload-list el-upload-list--picture-card wrapfix">
                <li class="el-upload-list__item is-success" v-for="(dt,i) in filelist" :key="dt.url">
                    <img v-if="getFileType(dt)=='img'" :src="dt.url" alt="" class="el-upload-list__item-thumbnail"> 
                    <div v-else-if="getFileType(dt)=='video'" class="mcon" >
                        <video ref="videoEle" id="videoEle" controls>
                            <source :src="dt.url" type="video/mp4">
                            您的浏览器不支持Video标签。
                        </video>
                        <!-- <span class="playbtn">
                            <i class="el-icon-video-play" @click.stop="play"></i>
                        </span> -->
                    </div>
                    <div v-else-if="getFileType(dt)=='audio'" class="mcon" >
                        <audio ref="audioEle" controls>
                            <source :src="dt.url" type="audio/mpeg">
                            您的浏览器不支持 audio 元素。
                        </audio>
                        <div style="text-align: center">{{dt.originalFilename}} </div>
                    </div>
                    <span v-else class="txt">
                        {{dt.originalFilename}}  
                    </span>
                    <label class="el-upload-list__item-status-label">
                        <i class="el-icon-upload-success el-icon-check"></i>
                    </label>
                    <div class="dbdel"><i class="el-icon-delete" @click.stop="del(i)"></i></div>
                    <!-- <span class="el-upload-list__item-actions">
                        <span class="el-upload-list__item-delete" @click="del(i)">
                            <i class="el-icon-delete"></i>
                        </span>
                    </span> -->
                </li>
            </ul>
            <div class="fitem" v-loading="loading">
                <template v-if="!loading">
                    <i class="el-icon-plus" />
                    <input type="file" @change='changeFn($event)' :disabled='disabled'/>
                </template>
            </div>
        </div>
    </div>
</template>

<script>
import{uploadFileToserver} from '@/api/arApi.js'
export default {
    props:{
        value:'',
        title:String,
        limit:Number,
        disabled:{
            type:Boolean,
            default:false
        },
        isUploadServer:{// 是否立即上传服务器
            type:Boolean,
            default:()=>true
        } 
    },
    data(){
        return{
           loading:false,
           filelist:[],
           playIng:false,  // 播放中
           st:''
        }
    },
    created(){
        this.init(this.value)
    },
    methods:{
        init(data=[]){
            if(!data || data.length<1) return
            data.forEach(item =>{
                let arr = item.split('/')
                const name = arr[arr.length-1]
                this.filelist.push({url:item,originalFilename:name})
            })
        },
        async changeFn(e){
            let file = e.target.files[0];
            // if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
            //     toast('只能上传图片')
            //     return false
            // }
            // if(file.size>3*1024*1000){
            //     toast('图片大小不能超过3M')
            //     return false
            // }
            if(this.isUploadServer){
                this.loading = true
                let fromData = new FormData()
                fromData.append('file', file)
                const res = await uploadFileToserver(fromData)
                if(res.success){
                    //res.url = process.env.VUE_APP_IMG_prefix+res.uri  // 重新替换服务器返回的url，因为测试环境这个地址时127.0.0.1
                    this.filelist = [...this.filelist,res]
                    let urlLists = []
                    this.filelist.forEach(item => {
                        urlLists.push(item.url)
                    });
                    this.$emit('input',urlLists)   // 通过 input 事件带出数值
                }else{
                    return this.$message.error(res.message)
                }
                this.loading = false
            }
        },
        del(index){
            this.filelist.splice(index,1)
            let urlLists = []
            this.filelist.forEach(item => {
                urlLists.push(item.url)
            });
            this.$emit('input',urlLists)   // 通过 input 事件带出数值
        },
        getFileType(fileObj){
            const filename = fileObj.originalFilename.toLowerCase()
            if((/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(filename))){
                return 'img'
            }else if((/\.(mp4|avi|wmv|mpeg)$/.test(filename))){
                return 'video'
            }else if((/\.(mp3|aac|wav|wma|cda|flac|m4a|mid|mka|mp2|mpa|mpc|ape|ofr|ogg|ra|wv|tta|ac3|dts)$/.test(filename))){
                return 'audio'
            }else{
                return ''
            }
        },
        play(){
            clearTimeout(this.st)
            const vele = document.getElementById('videoEle')
            if(this.playIng){ // 播放中,则暂停
                vele.pause()
                vele.controls = false
                this.playIng = false
            }else{  // 播放
                vele.play()
                vele.controls = true
                this.playIng = true
                // 3秒后隐藏按钮
                this.st = setTimeout(()=>{
                    document.querySelector('.playbtn').style.display="none"
                },3000)
            }  
        }
    }
}
</script>

<style lang="scss" scoped>
    .uploadImg {
        p {
            margin: 0;
            padding: 0;
            color: #ccc;
            padding-bottom: 10px;
        }
    }
    .fileListBox{
        
        .fitem{
            float: left;
            position: relative;
            z-index: 10;
            background-color: #fbfdff;
            border: 1px dashed #c0ccda;
            border-radius: 2px;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            width: 148px;
            height: 148px;
            line-height: 146px;
            vertical-align: top;
            text-align: center;
            margin: 0 8px 0 0;
            cursor: pointer;
            i{
                font-size: 28px;
                color: #8c939d;
            }
            &.preview{
                overflow: hidden;
                background-color: #fff;
                border: 1px solid #c0ccda;
            }
            input{
                width: 100%;
                height: 100%;
                position: absolute;
                z-index: 15;
                left: 0;
                top: 0;
                opacity: 0;
                cursor: pointer;
                &:disabled{
                    cursor: not-allowed;
                }
            }
        }
        .mcon{
            position: relative;
            z-index: 15;
            width: 100%;
            height: 100%;
            .playbtn{
                position: absolute;
                z-index: 15;
                width: 40px;
                height: 40px;
                line-height: 40px;
                text-align: center;
                left: 50%;
                top: 50%;
                margin: -30px 0 0 -20px;
                background: #faa9a9;
                font-size: 30px;
            }
            video{
               width: 100%;
               height: 118px; 
            }
            audio{
               width: 100%; 
               height: 70px; 
            }
        }
        
    }
</style>
<style lang="scss">
    .fileListBox{
        .el-upload-list{
            float: left;
        }
        .el-upload-list__item{
            float: left;
            display: flex;
            align-items: center;
            justify-content: center;
            word-break: break-all; 
            position: relative;
            z-index: 10;
            &:hover{
                .dbdel{
                    display: block;
                }
            }
            .txt{
                padding: 10px;
            }
            .dbdel{
                display: none;
                position: absolute;
                z-index: 20;
                width: 100%;
                height: 30px;
                left: 0;
                bottom: 0;
                background-color: rgba(0,0,0,.5);
                color: #fff;
                text-align: center;
                line-height: 30px;
                i{
                    cursor: pointer;
                    &:hover{
                        color:#faa9a9;
                    }
                }
            }
        } 
        .el-loading-spinner{
            margin-top: -64px;
        }
    }
</style>